<template>
  <!--百度搜索-->
  <div id="baidu-search">
    <div id="baidu-img">
      <img src="https://www.kuangstudy.com/assert/images/baidu.jpg" alt="百度一下">
    </div>
    <div id="baidu-input" @keyup.enter="search">
      <el-input placeholder="请输入内容" v-model="input">
        <el-button slot="append"
                   style="background-color:#2777f8;
                         border: 1px solid #2777f8;
                         color: #ececec;border-top-left-radius: 0;
                         border-bottom-left-radius: 0;" @click="search">搜索
        </el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaiduSearch",
  data() {
    return {
      input: ""
    }
  },
  methods:{
    search() {
      window.open("https://www.baidu.com/s?wd=" + this.input, "_target")
    }
  }
}
</script>

<style scoped lang="scss">
#baidu-search {
  width: 700px;
  height: 80px;
  overflow: hidden;
  display: flex;
  margin: 5px auto;

#baidu-img {
  flex: 1;
  margin-right: 50px;

img {
  width: 100%;
  height: 100%;
}
}

#baidu-input {
  flex: 2;
  line-height: 101px;
}
}

</style>